<template>
    <header>
  <ul>
    <router-link 
        tag="li"  
        :to="item.path" 
        v-for ="item in tab" 
        :key="item.id"
        active-class="active"
      >
        <span style="font-size:20px"> {{ item.text }} </span>
      </router-link>
  </ul>
  <van-icon name="arrow-left"  @click="gohome()"/>
    </header>
</template>

<script>
export default {
  data() {
    return {
         tab: [
        {
          id: 1,
          text: '物料展示',
          path: '/materiel'
        },
        {
          id: 2,
          text: '申请历史',
          path: '/history'
        },
        {
          id: 3,
          text: '申请流程',
          path: '/application'
        },
      ]
    };
  },
  methods:{
    gohome(){
      this.$router.push('/select');
    }
  }
};
</script>
<style lang="scss" scoped>
header{
  width: 100vw;
  height: 48px;
  border-bottom: 1px solid #ccc;
  ul{
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: space-around;
    li{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &.active{
        border-bottom: 2px solid red
      }
      i{
        font-size: 30px;
        margin-bottom: 4px;
      }
      span{
        font-size: 10px;
      }
    }
  }
}
.van-icon{
  position: relative;
  top:-30px;
  left:0px;

}
</style>
